<template>
  <view v-if="shenheStatus == 0" class="topic">
    <view class="topic-content">
      <view class="topic-title">{{ msg.title }}</view>
      <view class="topic-data">
        <view>{{ msg.addtime }}</view>
        <view>{{ msg.read_count }}</view>
      </view>
      <view class="topic-text">
        <u-parse :html="msg.content"></u-parse>
      </view>
    </view>
    <view class="btn-bottom">
      <view v-if="msg.is_favorite == 0" class="show" @click="favorite(1)">
        <text class="iconfont icon-collection"></text>
        <view>{{ $t("goods.collect") }}</view>
      </view>
      <view v-if="msg.is_favorite == 1" class="show" @click="favorite(0)">
        <text
          class="iconfont icon-collection-fill"
          style="color: #fa2c19"
        ></text>
        <view>{{ $t("goods.collected") }}</view>
      </view>
      <view class="xiang" @click="share">
        <text class="iconfont icon-share"></text>
        <view>{{ $t("goods.share") }}</view>
      </view>
    </view>

    <share :topic_id="id" ref="share"></share>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>
<script>
import Shenhe from "@/components/shenhe/shenhe";
import share from "./components/share.vue";
export default {
  components: {
    share,
    Shenhe,
  },
  data() {
    return {
      id: "",
      msg: "",
    };
  },
  onLoad(options) {
    uni.setNavigationBarTitle({
      title: this.$t("title.topic"),
    });
    if (options) {
      this.id = options.id;
      this.getDetails();
    }
    if (options.scene) {
      const scene = this.$utils.sceneDecode(options.scene);
      if (scene.gid) {
        this.id = scene.gid;
      }
    }
    this.getDetails();
  },
  methods: {
    //收藏
    favorite(type) {
      var params = {
        topic_id: this.id,
        action: type,
      };
      this.$allrequest.special.topicFavorite(params).then((res) => {
        if (res.code == 0) {
          this.msg.is_favorite = type;
          uni.showToast({
            title: res.msg,
          });
        }
      });
    },
    //获取详情内容
    getDetails() {
      var params = {
        id: this.id,
      };
      this.$allrequest.special.topicDetails(params).then((res) => {
        if (res.code == 0) {
          res.data.content = this.$utils.formatRichText(res.data.content);
          this.msg = res.data;
        }
      });
    },
    //显示分享弹窗
    share() {
      this.$refs.share.showShare();
    },
  },
};
</script>

<style lang="scss" scoped>
.topic {
  min-height: 100vh;
  padding-bottom: 110rpx;
}

.topic-content {
  padding: 0rpx 34rpx 110rpx;
  background-color: #ffffff;

  .topic-title {
    margin: 50rpx auto 43rpx;
    font-size: 48rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #1d1d1d;

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-break: break-all;
  }

  .topic-data {
    display: flex;
    font-size: 28rpx;
    align-items: center;
    color: #999999;

    > view:nth-child(1) {
      position: relative;
      margin-right: 15rpx;
      padding-right: 10px;
      &::before {
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(-50%, -50%);
        height: 28rpx;
        width: 1px;
        background: #999999;
      }
    }
  }

  .topic-text {
    margin-top: 52rpx;
  }
}

.btn-bottom {
  position: fixed;
  bottom: 0rpx;
  left: 0rpx;
  width: 100%;
  height: 100rpx;
  display: flex;
  background-color: #ffffff;

  > view {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

    .iconfont {
      margin-right: 8rpx;
      font-size: 52rpx;
    }
    view {
      font-size: 26rpx;
    }
  }
}
</style>
